import React from "react";
import { useAtom, useAtomValue } from "jotai";

import { devToolsOpenedAtom, devToolsSizeAtom } from "./state/global";
import DevToolsCollapsed from "./dev-tools-collapsed";
import DevToolsExpanded from "./dev-tools-expanded";
import { useResizeDocument } from "./hooks/use-resize-document";
import { useSubscribeToEditorView } from "./hooks/use-subscribe-to-editor-view";
import { useRollbackHistory } from "./hooks/use-rollback-history";
import { Editor } from "@valuation/core";

export default function DevTools(props: DevToolsProps) {
  const [isOpen, setIsOpen] = useAtom(devToolsOpenedAtom);
  const defaultSize = useAtomValue(devToolsSizeAtom);
  const editorView = props.editorView;
  useResizeDocument(isOpen, defaultSize);
  useSubscribeToEditorView(editorView, props.diffWorker);

  const rollbackHistory = useRollbackHistory(editorView);

  return <DevToolsExpanded rollbackHistory={rollbackHistory} />;
}

type DevToolsProps = {
  editorView: Editor;
  diffWorker?: Worker;
};
